<template>
	<view class="app app-bg">
		<!-- 页面内容开始 -->
		<u-cell-group>
			<!-- #ifdef MP-WEIXIN -->
			<u-cell-item :title="$t('avatar')">
				<view style="display: flex;justify-content: flex-end;">
					<button size="mini" class="vk-contents-important" plain open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<u-image width="100" height="100" :src="vk.getVuex('$user.userInfo.avatar')" class="avatar" mode="aspectFill" border-radius="20" :fade="false"></u-image>
					</button>
				</view>
			</u-cell-item>
			<!-- #endif -->

			<!-- #ifndef MP-WEIXIN -->
			<u-cell-item :title="$t('avatar')" @click="chooseAvatar">
				<view style="display: flex;justify-content: flex-end;">
					<u-image width="100" height="100" :src="vk.getVuex('$user.userInfo.avatar')" class="avatar" mode="aspectFill" border-radius="20" :fade="false"></u-image>
				</view>
			</u-cell-item>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<u-cell-item title="昵称" :value="vk.getVuex('$user.userInfo.nickname') || '点击设置'" @click="nicknameShow=true"></u-cell-item>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<u-cell-item title="昵称" :value="vk.getVuex('$user.userInfo.nickname') || '点击设置'" @click="updateNicknamePrompt"></u-cell-item>
			<!-- #endif -->
			<u-cell-item title="性别" :value="vk.vuex.getters('$user/getUserGender')" @click="updateSex"></u-cell-item>
			<u-cell-item title="生日" :value="vk.getVuex('$user.userInfo.birthday.text') || '点击设置'" @click="birthdayShow=true"></u-cell-item>
		</u-cell-group>
		<u-picker v-model="birthdayShow" mode="time" @confirm="birthdayConfirm" :safe-area-inset-bottom="true" confirm-color="var(--main)" :default-time="vk.getVuex('$user.userInfo.birthday.text')"></u-picker>
		<!-- 页面内容结束 -->

		<u-popup v-model="nicknameShow" border-radius="12" mode="bottom" height="500">
			<view style="display: flex;align-items: center; padding: 0 30rpx;height: 100rpx;">
				<text @click="nicknameShow=false">取消</text>
				<view style="text-align: center;font-weight: bold;flex: 1;">修改昵称</view>
				<u-button type="success" size="mini" :disabled="!form1.nickname" @click="updateNickname">保存</u-button>
			</view>
			<view style="padding: 30rpx;">
				<input v-model="form1.nickname" type="nickname" class="nickname-input" placeholder="请输入昵称" @blur="onBlurNickname" />
			</view>
		</u-popup>
		
		<!-- #ifdef MP-WEIXIN -->
		<!-- 微信小程序专用隐私授权弹窗组件 -->
		<vk-mall-privacy-popup position="bottom"></vk-mall-privacy-popup>
		<!-- #endif -->

	</view>
</template>

<script>
	var vk = uni.vk;			// vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				// init请求返回的数据
				data:{

				},
				// 表单请求数据
				form1:{
					nickname:""
				},
				scrollTop:0,
				birthdayShow:false,
				nicknameShow:false,
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			vk = uni.vk;
			this.options = options;
			this.init(options);
			uni.$on('uAvatarCropper', this.updateAvatar);
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady(){},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 监听 - 页面每次【卸载时】（一般用于取消页面上的监听器）
		onUnload(){
			uni.$off('uAvatarCropper', this.updateAvatar)
		},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options){
				console.log("init: ",options);
				uni.setNavigationBarTitle({
					title: this.$t('page.personal-information')
				});
				this.form1.nickname = vk.getVuex('$user.userInfo.nickname');
			},
			pageTo(path){
				vk.navigateTo(path);
			},
			// 修改昵称微信组件模式
			updateNickname(){
				let nickname = this.form1.nickname;
				if (nickname) {
					this.updateUserBaseInfo({ nickname }, ()=>{
						this.nicknameShow = false;
					});
				}
			},
			// 修改昵称内置弹窗模式
			updateNicknamePrompt(){
				let that = this;
				vk.prompt("请输入昵称","提示","确定","取消",(res)=>{
					if(res.confirm){
						let nickname = res.content;
						that.updateUserBaseInfo({ nickname });
					}
				},vk.getVuex('$user.userInfo.nickname'));
			},
			// 修改性别
			updateSex(){
				let that = this;
				vk.showActionSheet({
					list:["保密","男","女"],
					color:"#000000",
					success:(res)=>{
						let gender = res.index;
						that.updateUserBaseInfo({ gender });
					}
				});
			},
			birthdayConfirm(obj){
				let that = this;
				let birthday = {
					text: `${obj.year}-${obj.month}-${obj.day}`,
					time: obj.timestamp * 1000
				};
				that.updateUserBaseInfo({ birthday });
			},
			// 修改用户基础信息
			updateUserBaseInfo(data, success){
				vk.callFunction({
					url: 'client/user.updateUserBaseInfo',
					title:'请求中...',
					data,
					success,
				});
			},
			// 头像裁剪
			chooseAvatar(){
				this.$u.route({
					url: '/uni_modules/vk-uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
			// 修改头像
			updateAvatar(avatar){
				let that = this;
				if (avatar.indexOf(";base64,")>-1){
					// 上传到云存储
					vk.pubfn.base64ToFile({
						base64: avatar,
						success: (file) => {
							console.log('file: ', file)
							vk.uploadFile({
								title:"上传中...",
								file,
								suffix:"png", // 不传suffix会自动获取，但H5环境下获取不到后缀，但可以通过file.name 获取
								success:(res) =>{
									// 上传成功
									that.setAvatar(res.url);
								}
							});
						}
					});
				} else {
					that.setAvatar(avatar);
				}
			},
			// 设置头像
			setAvatar(avatar){
				vk.userCenter.setAvatar({
					data: {
						avatar,
					},
					success: (data) => {
						// 成功后的逻辑
						vk.toast("修改成功","ok")
					}
				});
			},
			// 监听 - 微信昵称输入框
			onBlurNickname(e){
				let nickname = e.detail.value;
				this.form1.nickname = nickname;
			},
			// 监听 - 微信头像选择器
			onChooseAvatar(e) {
				const { avatarUrl } = e.detail
				if (avatarUrl) {
					// 上传图片到云储存
					vk.callFunctionUtil.uploadFile({
						filePath: avatarUrl,
						fileType: "image",
						success:(res) => {
							this.setAvatar(res.url);
						}
					});
				}
			},
		},
		// 监听器
		watch:{

		},
		// 计算属性
		computed:{

		}
	}
</script>
<style lang="scss" scoped>
	.avatar{
		width: 100rpx;
		height: 100rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}
	.nickname-input{
		border-bottom: 2rpx solid #f3f3f3;
		padding: 20rpx 0;
	}
</style>
